<template>
  <div>
<el-tree
  ref="tree"
  :props="defaultProps"
  current-node-key="1"
  :load="loadNode"
  lazy
  indent="0"
  node-key="space_id"
  :default-expanded-keys="defaultExpanded"
  :filter-node-method="filterNode"
  :expand-on-click-node="true"
  highlight-current
  @node-collapse="nodeCollapse"
  @node-expand="nodeExpand"
>
  <div class="custom-tree-node" slot-scope="{ node, data}">
    <div>
      <svg-icon icon-class="space" class="icon-space" v-if="!data.is_child||data.space_id=='0'"/>
      <svg-icon icon-class="file" class="icon-space" v-else/>
      <span @click.stop="expand(data)">{{ node.label }}</span>
      <span style="font-size: 11px;color: #3889b1"
            v-if="data.space_property_name">（{{data.space_property_name}}）</span>
    </div>
    <span class="el-ic">

               <svg-icon icon-class="polices" title="添加行政区域" class="icon-space"
                         @click.stop="addSpatial(data,{'path':'Add','title':'添加行政区域'})"/>
               <svg-icon icon-class="example" title="添加公共区域" class="icon-space"
                         @click.stop="addSpatial(data,{'path':'Public','title':'新建公共区域'})"/>
               <svg-icon icon-class="danyuan" title="添加管理单元" class="icon-space"
                         @click.stop="addSpatial(data,{'path':'AddManageUnit','title':'新建管理单元'})"/>
      <!--<svg-icon icon-class="xiaoqu" title="添加小区" class="icon-space" @click.stop="addSpatial(data,{'path':'AddManageUnit','title':'新建小区'})"/>-->
               <i class="el-icon-edit" @click="editSpatial(data,'edit')" title="修改" v-if="data.space_id!='0'"></i>
               <svg-icon icon-class="detail" title="查看该空间详情" class="icon-space"
                         @click.stop="lookSpatial(data)" v-if="data.space_id!='0'"/>
               <i class="el-icon-delete" @click.stop="() => removeDialogVisible(node, data)" title="删除该空间"
                  v-if="data.space_id!='0'"></i>
             </span>
  </div>
</el-tree>
  </div>
</template>

<style>

  .el-tree-node{
    position: relative;
    padding-left: 16px;
  }
  .el-tree-node__children{
    padding-left: 16px;
  }
  .el-tree-node :last-child:before {
    height: 38px;
  }
  .el-tree>.el-tree-node:before{
    border-left: none;
  }
  .el-tree>.el-tree-node:after{
    border-top: none;
  }
  .el-tree-node:before,.el-tree-node:after{
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
  .tree :first-child .el-tree-node:before{
    border-left: none;
  }
  .el-tree-node:before {
    border-left: 1px dashed #4386c6;
    bottom: 0px;
    height: 100%;
    top: -20px;
    width: 1px;
  }
  .el-tree-node:after {
    border-top: 1px dashed #4386c6;
    height: 20px;
    top: 17px;
    width: 24px;
  }
</style>

<!--
<template>
  <div>
    &lt;!&ndash;<el-tree&ndash;&gt;
    &lt;!&ndash;:expand-on-click-node="false"&ndash;&gt;
    &lt;!&ndash;:data="data4"&ndash;&gt;
    &lt;!&ndash;:props="defaultProps"&ndash;&gt;
    &lt;!&ndash;node-key="key"&ndash;&gt;
    &lt;!&ndash;default-expand-all&ndash;&gt;
    &lt;!&ndash;:render-content="renderContent">&ndash;&gt;
    &lt;!&ndash;</el-tree>&ndash;&gt;
    <div style="display: flex;justify-content: space-between;width: 300px">
      <div>123123123</div>

      <el-switch
        style="display: block"
        v-model="value4"
        active-color="#FF3030"
        inactive-color="#7FFF00"
        active-text="非正面"
        inactive-text="正面"
      >
      </el-switch>
    </div>
  </div>
</template>

<script>
let id = 1000;
import {Tree,Switch} from 'element-ui'

export default {
  components: {
    elTree: Tree,
    elSwitch:Switch
  },
  data() {
    return {
      value3: true,
      value4: true,

      data4: [{
        id: "1",
        label: "业绩综述",
        node_type: 0,
        node_value: "",
        output_unit: "",
        ratio: "1.0",
        isParent: true,
        is_analysis_class: 0,
        isLeaf: true,
        children: [
          {
            id: "1_1",
            label: "财务业绩",
            node_type: 0,
            node_value: "",
            output_unit: "",
            ratio: "1.0",
            isParent: true,
            is_analysis_class: 0,
            title: "财务业绩",
            key: "业绩综述-财务业绩",
            emotion: 0,
          },
          {
            id: "1_2",
            label: "客户经营",
            node_type: 0,
            node_value: "",
            output_unit: "",
            ratio: "1.0",
            isParent: true,
            is_analysis_class: 0,
            children: [
              {
                id: "1_2_1",
                label: "个人客户数",
                node_type: 1,
                node_value: "16573.0",
                output_unit: "万人",
                ratio: 10000,
                isParent: true,
                is_analysis_class: 0,
                emotion: 0,
                children: [
                  {
                    id: "1_2_1_1",
                    label: "客均利润",
                    node_type: 1,
                    node_value: "355.85",
                    output_unit: "元",
                    ratio: 1,
                    isParent: false,
                    is_analysis_class: 0,
                    children: [],
                    title: "客均利润",
                    key: "业绩综述-客户经营-个人客户数-客均利润",
                    emotion: 0,
                  },
                  {
                    id: "1_2_1_2",
                    label: "客均合同数",
                    node_type: 1,
                    node_value: "2.32",
                    output_unit: "份",
                    ratio: 1,
                    isParent: false,
                    is_analysis_class: 0,
                    children: [],
                    title: "客均合同数",
                    key: "业绩综述-客户经营-个人客户数-客均合同数",
                    emotion: 0,
                  },
                  {
                    id: "1_2_1_3",
                    label: "新增客户数",
                    node_type: 1,
                    node_value: "4630.0",
                    output_unit: "万人",
                    ratio: 10000,
                    isParent: false,
                    is_analysis_class: 0,
                    children: [],
                    title: "新增客户数",
                    key: "业绩综述-客户经营-个人客户数-新增客户数",
                    emotion: 0,
                  }
                ],
                title: "个人客户数",
                key: "业绩综述-客户经营-个人客户数"
              },
              {
                id: "1_2_2",
                label: "互联网用户量",
                node_type: 1,
                node_value: "0.0",
                output_unit: "百万元",
                ratio: 1000000,
                isParent: false,
                is_analysis_class: 0,
                children: [],
                title: "互联网用户量",
                key: "业绩综述-客户经营-互联网用户量",
                emotion: 0,
              },
              {
                id: "1_2_3",
                label: "月均活跃用户",
                node_type: 1,
                node_value: "7356.0",
                output_unit: "万人",
                ratio: 10000,
                isParent: false,
                is_analysis_class: 0,
                children: [],
                title: "月均活跃用户",
                key: "业绩综述-客户经营-月均活跃用户",
                emotion: 0,
              },
              {
                id: "1_2_4",
                label: "持有多家子公司合同的客户数",
                node_type: 1,
                node_value: "4723.0",
                output_unit: "万人",
                ratio: 10000,
                isParent: false,
                is_analysis_class: 0,
                children: [],
                title: "持有多家子公司合同的客户数",
                key: "业绩综述-客户经营-持有多家子公司合同的客户数",
                emotion: 0,
              },
              {
                id: "1_2_5",
                label: "持有多家子公司合同的客户数占比",
                node_type: 1,
                node_value: "28.5",
                output_unit: "%",
                ratio: 1,
                isParent: false,
                is_analysis_class: 0,
                children: [],
                title: "持有多家子公司合同的客户数占比",
                key: "业绩综述-客户经营-持有多家子公司合同的客户数占比",
                emotion: 0,
              }
            ],
            title: "客户经营",
            key: "业绩综述-客户经营",
            emotion: 0,
          }
        ],
        title: "业绩综述",
        key: "业绩综述",
        emotion: 0,
      },
        {
          id: "2",
          label: "业绩综述",
          node_type: 0,
          node_value: "",
          output_unit: "",
          ratio: "1.0",
          isParent: true,
          is_analysis_class: 0,
          isLeaf: true,
          title: "业绩综述",
          key: "业绩综述",
          emotion: 0,
          children: [{
            id: "2_1",
            label: "财务业绩",
            node_type: 0,
            node_value: "",
            output_unit: "",
            ratio: "1.0",
            isParent: true,
            is_analysis_class: 0,
            title: "财务业绩",
            key: "业绩综述-财务业绩",
            emotion: 1,
          }]
        }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },

  methods: {
    emotionYes(data) {
      console.log("emotionYes", data);
      data.emotion == 0;
      // const newChild = {id: id++, label: 'testtest', children: []};
      // if (!data.children) {
      //   this.$set(data, 'children', []);
      // }
      // data.children.push(newChild);
    },

    emotionNo(data) {
      console.log("emotionNo", data);
      data.emotion == 1;
      // const parent = node.parent;
      // const children = parent.data.children || parent.data;
      // const index = children.findIndex(d => d.id === data.id);
      // children.splice(index, 1);
    },

    renderContent(h, {node, data, store}) {
      // console.log("emotionNo", h);
      // console.log("emotionNo", node);
      // console.log("emotionNo", data);
      // console.log("emotionNo", store);
      console.log("emotionNo", data.emotion);
      if (data.emotion == 0) {
        console.log("zhangxf");
        return (
          <span
            style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
          <span>
            <span style="color:red">{node.label}</span>
            </span>
            <span>
              <el-button style="font-size: 12px;color:gray" type="text"
                         on-click={() => this.emotionYes(data)}>正面</el-button>
              <el-button style="font-size: 12px;color:gray" type="text"
                         on-click={() => this.emotionNo(data)}>非正面</el-button>
            </span>
          </span>);
      } else {
        console.log("zhangxf2");
        return (
          <span
            style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
          <span>
            <span style="color:green">{node.label}</span>
            </span>
            <span>
              <el-button style="font-size: 12px;color:gray" type="text"
                         on-click={() => this.emotionYes(data)}>正面</el-button>
              <el-button style="font-size: 12px;color:gray" type="text"
                         on-click={() => this.emotionNo(data)}>非正面</el-button>
            </span>
          </span>);
      }

    }
  }
};
</script>
-->

